<template>
  <el-dialog
    title="转移联系人"
    append-to-body
    :visible="visible"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="vb-transfer-body">
      <div class="transfer-body-row">是否将联系人【{{ data.name }}】转移给其他负责人？转移成功后该操作无法恢复。</div>
      <div class="transfer-body-row">新的负责人         <VbUserDeptInput v-model="user" style="width:200px;margin-left:10px" :display-user-name="true" type="user" placeholder="请选择所有人" @change="handleChangeUser" />  </div>
      <el-row style="text-align:right">
        <el-button plain @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </el-row>
    </div>
  </el-dialog>

</template>
<script>
import { transferContact } from '@/api/contact'
import VbUserDeptInput from '@/components/VbUsers/VbUserDeptInput'
export default {
  name: 'ClueTransfer',
  components: { VbUserDeptInput },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }

  },
  data() {
    return {
      name: '',
      user: {}
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleChangeUser(v) {
      this.name = v.userName
    },
    handleSubmit() {
      if (!this.name) {
        this.$message.warning('请输入姓名')
        return
      }
      transferContact({ head: this.name, id: this.data.id }).then(res => {
        this.$emit('close', true, false)
        this.$message.success('转移成功')
      }).cacth(ex => {
        this.$message.error(ex.message || '转移失败')
      })
    }
  }
}
</script>
<style lang="scss">
.vb-transfer-body{
  color: #333;
  padding-left: 30px;

  .transfer-body-row{
    padding:20px 0;
    display: flex;
    align-items: center;

  }

}
</style>
